// 底部页面
import React, { useState, useEffect } from 'react';
import '../Bottom/bottom.css';

// tab滑动导航
import Marketingmin from '../../public/Marketingmin'
import ImageMarketingmin from '../../public/ImageMarketingmin'

import SectionList from '../../public/SectionList '
import ImageGallery from '../../public/ImageGallery ';
import ImageGallery1 from '../../public/ImageGallery1';
import ImageGallery2 from '../../public/ImageGallery2';

// 视频
import VideoGallery3 from '../../public/ImageGallery3';

import ImageGallery4 from '../../public/ImageGallery4';
import ImageGallery5 from '../../public/ImageGallery5';
import ImageGallery6 from '../../public/ImageGallery6';
import ImageGallery7 from '../../public/ImageGallery7';
import ImageGallery8 from '../../public/ImageGallery8';

// 页尾
import Right_footing from '../page_footing/page_footing';

// 页尾tab切换
import End_tab from "../End_tab/End_tab"

// 导入多个数据部分
// import { sectionmarketing, sections1, sections2, sections3, sections4, sections5, sections6, sections7, sections8 } from '../../public/Data';

import { getlist } from '../../request/index'
const Bottom: React.FC = () => {
    const [activemarketing, setActivemarketing] = useState('九一八事变纪念日');
    // 当前激活的图像部分状态
    const [activeSection, setActiveSection] = useState('精选推荐');
    const [activeSection1, setActiveSection1] = useState('近期热点');
    const [activeSection2, setActiveSection2] = useState('精选推荐');
    const [activeSection3, setActiveSection3] = useState('精选推荐');
    const [activeSection4, setActiveSection4] = useState('中秋国庆');
    const [activeSection5, setActiveSection5] = useState('精选推荐');
    const [activeSection6, setActiveSection6] = useState('配乐上新');
    const [activeSection7, setActiveSection7] = useState('精选推荐');
    const [activeSection8, setActiveSection8] = useState('精选推荐');

    const [Data1, setData1] = useState({})
    const [Data2, setData2] = useState({})
    const [Data3, setData3] = useState({})
    const [Data4, setData4] = useState({})
    const [Data5, setData5] = useState({})
    const [Data6, setData6] = useState({})
    const [Data7, setData7] = useState({})
    const [Data8, setData8] = useState({})
    const [Data9, setData9] = useState({})
    const [Data10, setData10] = useState({})



    // 使用状态钩子，初始化 videoKey 为 0
    const [videoKey, setVideoKey] = useState(0);

    // 定义函数 update，接受一个索引参数
    const update = (index: any) => {
        // 输出选中的索引到控制台
        console.log('Selected Index:', index);

        // 更新活动部分的状态为传入的索引
        setActiveSection3(index);

        // 更新 videoKey，确保每次调用都增加 1，以触发相关组件的重渲染
        setVideoKey(prevKey => prevKey + 1);
    }


    useEffect(() => {
        getlist().then(res => {
            console.log('数据', res.data.data);
            setData1(res.data.data.sectionmarketing)
            setData2(res.data.data.sections)
            setData3(res.data.data.sections1)
            setData4(res.data.data.sections2)
            setData5(res.data.data.sections3)
            setData6(res.data.data.sections4)
            setData7(res.data.data.sections5)
            setData8(res.data.data.sections6)
            setData9(res.data.data.sections7)
            setData10(res.data.data.sections8)
        })
    }, [])

    return (
        <div className='bottom_all'>

            {/* 营销热点 */}
            <div className='marketing'>
                <div className='marketing_top'>
                    <div className='marketing_left'>
                        <h1><a href="/home/stration" style={{color:'#000'}}>营销热点</a></h1>
                        <p className='marketing_p'></p>
                    </div>
                    <div className='marketing_right'>
                        <Marketingmin
                            sections={Object.keys(Data1)}
                            activeSection={activemarketing}
                            onSectionMouseEnter={setActivemarketing}
                        />
                    </div>
                </div>
                <ImageMarketingmin images={Data1[activemarketing] || []} />
            </div>



            {/* 聚焦近期热点 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>聚焦近期热点</h1>
                        <p className='grey'>精选热点专题实时更新,热门素材轻松获取~</p>
                    </div>
                    <div className='focus_right'>
                        <SectionList
                            sections={Object.keys(Data2)} // 将 sections 对象的所有键作为章节名传递给 SectionList
                            activeSection={activeSection} // 传递当前活动章节的状态
                            onSectionMouseEnter={setActiveSection} // 当鼠标进入某个章节时，更新活动章节
                        />
                    </div>
                </div>
                <ImageGallery images={Data2[activeSection] || []} /> {/* 确保有默认值 */}
            </div>


            <br /><br />


            {/* 新晋潮流—AIGC智图 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>新晋潮流—AIGC智图</h1>
                        <p className='grey'>新晋潮流艺术，AI智能艺术图片助您提升效率</p>
                    </div>
                    <div className='focus_right'>
                        <SectionList
                            sections={Object.keys(Data3)}
                            activeSection={activeSection1}
                            onSectionMouseEnter={setActiveSection1}
                        />
                    </div>
                </div>
                <ImageGallery1 images={Data3[activeSection1] || []} />
            </div>


            <br /><br />


            {/* 新晋潮流—3D视觉 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>新晋潮流—3D视觉</h1>
                        <p className='grey'>精选热点专题实时更新，热门素材轻松get～</p>
                    </div>
                    <div className='focus_right'>
                        <SectionList
                            sections={Object.keys(Data4)}
                            activeSection={activeSection2}
                            onSectionMouseEnter={setActiveSection2}
                        />
                    </div>
                </div>
                <ImageGallery2 images={Data4[activeSection2] || []} />
            </div>


            <br /><br />


            {/* 行业趋势—视频篇 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>行业趋势—视频篇</h1>
                        <p className='grey'>精选热点专题实时更新，热门素材轻松get～</p>
                    </div>
                    <div className='focus_right'> {/* 右侧导航区域 */}
                        <SectionList
                            sections={Object.keys(Data5)} // 提取 sections3 的所有键作为导航项
                            activeSection={activeSection3} // 当前激活的导航项
                            onSectionMouseEnter={update} // 鼠标悬停时更新当前激活项的处理函数
                        />
                    </div>
                </div>
                {/* 视频部分 */}
                <VideoGallery3 key={videoKey} videos={Data5[activeSection3] || []} /> {/* 展示当前激活部分的视频列表 */}
            </div>


            <br /><br />


            {/* 行业趋势-海报篇 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>行业趋势-海报篇</h1>
                        <p className='grey'>精选热点专题实时更新，热门素材轻松get～</p>
                    </div>
                    <div className='focus_right'>
                        <SectionList
                            sections={Object.keys(Data6)}
                            activeSection={activeSection4}
                            onSectionMouseEnter={setActiveSection4}
                        />
                    </div>
                </div>
                <ImageGallery4 images={Data6[activeSection4] || []} />
            </div>


            <br /><br /><br /><br /><br />    <br /><br /><br /><br /><br />    <br /><br /><br />


            {/* 行业趋势-实拍篇 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>行业趋势-实拍篇</h1>
                        <p className='grey'>精选热点专题实时更新，热门素材轻松get～</p>
                    </div>
                    <div className='focus_right'>
                        <SectionList
                            sections={Object.keys(Data7)}
                            activeSection={activeSection5}
                            onSectionMouseEnter={setActiveSection5}
                        />
                    </div>
                </div>
                <ImageGallery5 images={Data7[activeSection5] || []} />
            </div>

            <br /><br />

            {/* 行业趋势-配乐篇 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>行业趋势-配乐篇</h1>
                        <p className='grey'>精选热点专题实时更新，热门素材轻松get～</p>
                    </div>
                    <div className='focus_right'>
                        <SectionList
                            sections={Object.keys(Data8)}
                            activeSection={activeSection6}
                            onSectionMouseEnter={setActiveSection6}
                        />
                    </div>
                </div>
                <ImageGallery6 images={Data8[activeSection6] || []} />
            </div>


            <br /><br /><br /><br /><br />

            {/* 行业趋势-人像篇 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>行业趋势-人像篇</h1>
                        <p className='grey'>精选热点专题实时更新，热门素材轻松get～</p>
                    </div>
                    <div className='focus_right'>
                        <SectionList
                            sections={Object.keys(Data9)}
                            activeSection={activeSection7}
                            onSectionMouseEnter={setActiveSection7}
                        />
                    </div>
                </div>
                <ImageGallery7 images={Data9[activeSection7] || []} />
            </div>


            <br /><br />



            {/* 行业趋势-电商篇 */}
            <div className='focus'>
                <div className='focus_top'>
                    <div className='focus_left'>
                        <h1>行业趋势-人像篇</h1>
                        <p className='grey'>精选热点专题实时更新，热门素材轻松get～</p>
                    </div>
                    <div className='focus_right'>
                        <SectionList
                            sections={Object.keys(Data10)}
                            activeSection={activeSection8}
                            onSectionMouseEnter={setActiveSection8}
                        />
                    </div>
                </div>
                <ImageGallery8 images={Data10[activeSection8] || []} />
            </div>



            {/* 选择适合您团队/企业的解决方案 */}
            <Right_footing></Right_footing>


            {/* 页尾tab切换 */}
            <End_tab></End_tab>
        </div>


    );
};

export default Bottom;



